<template>
  <transition name="showbox">
    <div class="additems"  v-show="flag">
      <div class="close" @click="close">
        X
      </div>
      <div class="container">
         <div class="bigbox article" v-show="show == 1">
           <div class="header" style="margin-bottom: 2rem">
             <el-input v-model="title" placeholder="请输入标题"  maxlength="10" show-word-limit style="margin-right: 2rem"></el-input>
              <el-select v-model="include" placeholder="请选择文章类型" @change="styleChange" style="width:70%">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select>
           </div>
          <el-input
            class="info"
            type="textarea"
            placeholder="请输入内容"
            v-model="container"
            maxlength="120"
            show-word-limit
            :rows="6"
            resize = "none"
          >
          </el-input>
          <el-upload
            class="avatar-uploader"
            :action="myurl"
            :data="{url:dirname(),name:new Date().getTime(),type:1}"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :on-error="handleError">
            <div v-if="imageUrl" class="avatar useimage" :style="{backgroundImage:`url(${imageUrl})`}"></div>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-input
            type="textarea"
            class="info"
            placeholder="请输入内容"
            v-model="totalinfo"
            maxlength="360"
            show-word-limit
            :rows="8"
            resize = "none"
          >
          </el-input>
          <div class="uploadairticle" @click="uploadairticle">
            文章上传
          </div>
        </div>

        <div class="bigbox picture" v-show="show == 2">
         
          <el-upload
            class="avatar-uploader"
            :action="myurl"
            :data="{url:dirname(),name:new Date().getTime(),type:2}"
            :show-file-list="false"
            :on-success="handlepicSuccess"
            :on-error="handleError">
            <div v-if="imageUrl" class="avatar useimage" :style="{backgroundImage:`url(${imageUrl})`}"></div>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-input
            type="textarea"
            class="info"
            placeholder="请输入内容"
            v-model="picdesc"
            maxlength="360"
            show-word-limit
            :rows="8"
            resize = "none"
          >
          </el-input>
          <div class="uploadairticle" @click="uploadpicture">
            照片上传
          </div>

        </div>


        <div class="bigbox note" v-show="show == 3">
          <el-input v-model="notetitle" placeholder="请输入标题"  maxlength="10" show-word-limit style="margin-bottom: 2rem"></el-input>
          <el-input
            class="info"
            type="textarea"
            placeholder="请输入内容"
            v-model="notecontainer"
            maxlength="360"
            show-word-limit
            :rows="8"
            resize = "none"
            style="margin-bottom: 2rem"
          ></el-input>
          
          <el-upload
            ref="uploadImg"
            :action="myurl"
            :data="{url:dirname(),name:new Date().getTime(),type :3}"
            list-type="picture-card"
            :on-success="handlenotesSuccess"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" :append-to-body='true'>
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>

          <div class="uploadairticle" @click="uploadnote" style="margin-top : 2rem">
            随记上传
          </div>
        </div>

        <div class="bigbox techology" v-show="show == 4">
          <div class="header" style="margin-bottom: 2rem">
            <el-input v-model="techtitle" placeholder="请输入标题"  maxlength="50" show-word-limit style="margin-right: 2rem;width:200%" ></el-input>
            <el-input v-model="techtype" placeholder="请输入分类"  maxlength="8" show-word-limit ></el-input>
          </div>
          <!-- <el-input
            type="textarea"
            class="info"
            placeholder="请输入内容"
            v-model="techcontainer"
            maxlength="3600"
            show-word-limit
            :rows="10"
            resize = "none"
          ></el-input> -->
          <div>
            <editor :techtitle = "techtitle" :techtype = "techtype" ref="editor" @myshowlist = "myshowlist"></editor>
          </div>
          <div class="uploadairticle" @click="uploadtechology">
            发帖
          </div>
        </div>
      </div>
     
    </div>
  </transition>
</template>

<script>
import editor from "../mavoneditor/editor.vue"
import * as myfunc from "../../commom/js/myfunc"
export default {
  props:{
    show:{
      type:Number,
      default:1
    }
  },
  data(){
    return{
      title:'',
      container:'',
      totalinfo:'',
      userinfo:{},
      include:'',
      flag:false,
      myurl:this.serverurl+'file/upload',
      imageUrl: '',
      options:[
        {
          value: '0',
          label: '生活'
        },
        {
          value: '1',
          label: '旅途'
        },
        {
          value: '2',
          label: '学习'
        }
      ],
      notetitle:'',
      notecontainer:'',
      dialogImageUrl: '',
      dialogVisible: false,
      fileList:[],
      picdesc:'',//摄影描述
      techtitle:'',
      techtype:'',
      techcontainer:''
    }
  },
  created(){
    this.isshowlogin()
  },
  methods:{
    uploadtechology(){//交流帖子上传
      let value = myfunc.getlocalstorage();
      if(JSON.stringify(value) == "{}"){
        this.$notify({
          title: '警告',
          message: '请先登录',
          type: 'warning'
        });
        return
      }
      if(this.techtitle == "" || this.techtype == ""){
        this.$notify({
          title: '警告',
          message: '内容未完成',
          type: 'warning'
        });
        return
      }
      this.$refs.editor.upload();
      this.techtitle = "";
      this.techtype = "";
      // setTimeout(()=>{
      //   this.$emit('showlist')
      // },50)
      this.flag = false;
    },
    myshowlist(){
      this.$emit('showlist')
    },
    handlepicSuccess(res, file){//摄影上传成功
      let obj = file.response
      this.imageUrl = this.serverurl+obj.path+'/'+obj.filename;
      this.$notify.success({
        title: '成功',
        message: `文件上传成功`
      });
    },
    uploadpicture(){//摄影文档上传
      let value = myfunc.getlocalstorage();
      if(JSON.stringify(value) == "{}"){
        this.$notify({
          title: '警告',
          message: '请先登录',
          type: 'warning'
        });
        return
      }
      if(this.picdesc == "" || this.imageUrl == ""){
        this.$notify({
          title: '警告',
          message: '摄影未完成',
          type: 'warning'
        });
        return
      }
      let options = {
        type:this.show,
        uid:value._id,
        imgurl:this.imageUrl,
        title:this.picdesc
      };
      this.$http.post(this.serverurl+'airticcle/add',options).then((result)=>{
        let info = result.body;
        if(info.status == 200){
          this.$notify({
            title: '成功',
            message: '摄影上传成功',
            type: 'success'
          });
          this.picdesc = "";
          this.imageUrl = "";
          this.$emit('showpicturelist')
          this.flag = false;
        }
      },(err)=>{
        console.log(err)
      })
    },
    handlenotesSuccess(res, file) {
      let obj = file.response
      var imageUrl = this.serverurl+obj.path+'/'+obj.filename;
      this.fileList.push(imageUrl)
      this.$notify.success({
        title: '成功',
        message: `文件上传成功`
      });
    },
    handleRemove(file, fileList) {
      let obj = file.response;
      this.$http.post(this.serverurl+'file/delete',{path:obj.path,filename:obj.filename}).then((result)=>{
      var imageUrl = this.serverurl+obj.path+'/'+obj.filename;
      var index = this.fileList.indexOf(imageUrl); 
      if (index > -1) { 
        this.fileList.splice(index, 1); 
      } 
      this.$notify.success({
        title: '成功',
        message: `文件删除成功`
      });
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      console.log(this.dialogImageUrl)
      this.dialogVisible = true;
    },
    uploadnote(){//上传随记
      let value = myfunc.getlocalstorage();
      if(JSON.stringify(value) == "{}"){
        this.$notify({
          title: '警告',
          message: '请先登录',
          type: 'warning'
        });
        return
      }
      if(this.notetitle == "" || this.notecontainer == "" || this.fileList.length == 0){
        this.$notify({
          title: '警告',
          message: '随记未完成',
          type: 'warning'
        });
        return
      }
      let options = {
        type:this.show,
        uid:value._id,
        title:this.notetitle,
        container:this.notecontainer,
        imglist:this.fileList
      }
      this.$http.post(this.serverurl+'airticcle/add',options).then((result)=>{
        let info = result.body;
        if(info.status == 200){
          this.$notify({
            title: '成功',
            message: '随记上传成功',
            type: 'success'
          });
          this.notetitle = "";
          this.notecontainer = "";
          this.fileList =[];
          this.$refs.uploadImg.clearFiles()
          this.$emit('shownotelist')
          this.flag = false;
        }
      },(err)=>{
        console.log(err)
      })
    },
    uploadairticle(){
      let value = myfunc.getlocalstorage();
      if(JSON.stringify(value) == "{}"){
        this.$notify({
          title: '警告',
          message: '请先登录',
          type: 'warning'
        });
        return
      }
      if(this.title == "" || this.container == "" || this.totalinfo == ""){
        this.$notify({
          title: '警告',
          message: '文章未完成',
          type: 'warning'
        });
        return
      }
      let options = {
        type:this.show,
        uid:value._id,
        title:this.title,
        imgurl:this.imageUrl,
        container:this.container,
        totalinfo:this.totalinfo,
        include:this.include
      };
      this.$http.post(this.serverurl+'airticcle/add',options).then((result)=>{
        let info = result.body;
        if(info.status == 200){
          this.$notify({
            title: '成功',
            message: '文章上传成功',
            type: 'success'
          });
          this.title = "";
          this.imageUrl = "";
          this.container = "";
          this.totalinfo = "";
          this.include = "";
          this.$emit('showairticlelist')
          this.flag = false;
        }
      },(err)=>{
        console.log(err)
      })
    },
    styleChange(val){//下拉框事件
       this.options.forEach((item)=>{
         if(item.value == val){
           this.include = item.label
         }
       })
    },
    handleAvatarSuccess(res, file) {
      let obj = file.response
      this.imageUrl = this.serverurl+obj.path+'/'+obj.filename;
      this.$notify.success({
        title: '成功',
        message: `文件上传成功`
      });
    },
    handleError(){
      this.$notify.error({
        title: '失败',
        message: `文件上传失败`
      });
    },
    isshowlogin(){//根据本地缓存判断用户是否登录过或还是处于未注册状态
      let value = myfunc.getlocalstorage();
      if(JSON.stringify(value) == "{}"){//本地缓存为空
        return
      }else{
        this.userinfo = value;
      }
    },
    dirname(){//发送后端文件夹名称
      var time = new Date()
      let d = new Date(time)
      let D = d.getDate();
      let M = d.getMonth() + 1;
      let Y = d.getFullYear();
      if(D< 10){
        D = '0'+D
      }
      if(M<10){
        M = '0'+M
      }
      return `${Y}${M}${D}`
    },
    open(){
      this.flag = true;
      this.isshowlogin()
    },
    close(){
      this.flag = false;
      this.imageUrl = "";
    }
   
  },
  components:{
    editor
  }
}
</script>

<style lang="less" scoped>
/deep/.el-upload--picture-card{
  width: 12rem;
  height: 12rem;
  font-size: 1.5rem;
  line-height: 13rem;
}
/deep/.el-upload-list--picture-card .el-upload-list__item{
  width: 12rem;
  height: 12rem;
}
/deep/.avatar-uploader{
  text-align: center;
  margin-bottom: 2rem;
}
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
  .useimage{
    width: 100%;
    height: 30rem;
    background-position: center center;
    background-repeat: no-repeat;
    background-size:cover;
    overflow: hidden;
  }
}
/deep/.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
/deep/.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
/deep/.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.additems{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  padding: 2rem 1rem;
  overflow-y:scroll;
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  &::-webkit-scrollbar {
      width: 0 !important;
  }
  z-index: 999;
  .close{
    position: absolute;
    cursor: pointer;
    left: 90%;
    top: 5%;
    transform: translate3d(0,0,0);
    width: 4rem;
    border-radius: 50%;
    text-align: center;
    line-height: 4.2rem;
    height: 4rem;
    font-size: 2rem;
    background-color: #fff;
    color:black;
  }
  .container{
    width: 60%;
    min-height: 80%;
    background-color: #F5F5F5;
    border-radius: 1.2rem;
    margin:5rem auto 2rem;
    padding: 2rem;
    box-sizing: border-box;
    .bigbox{
      .header{
        display: flex;
      }
      .info{
        margin-bottom: 2rem;
      }
      .upload{
        margin-bottom: 2rem;
        .el-upload{
           width: 100% !important;
        }
        .el-upload-dragger{
          width: 100% !important;
        }
      }
      .uploadairticle{
        margin: 0 auto;
        width: 23.3rem;
        height: 4rem;
        line-height: 4rem;
        border-radius: 1rem;
        background-color: rgba(0, 122, 255, 100);
        color: rgba(255, 255, 255, 100);
        font-size:1.8rem;
        text-align: center;
      }
    }
    
  }
}
.showbox-enter-active,.showbox-leave-active {
  transition: all 0.4s ease;
}
.showbox-enter, .showbox-leave-to
{
  transform: translateX(100%);
  opacity: 0;
}
</style>